<!DOCTYPE HTML>

<html ng-app lang="en">

{{>/head}}

<style type="text/css">
     tr.rowlink {
        cursor: pointer;
     }
</style>

<div class="container">

    <!-- ========================================================================================================= row1 (Title)-->
    <div class="row">

        <center><h1 class="logoBigText"><span class="vcu">Rambadger</span>.Platforms</h1></center>

    </div>
    <!-- ========================================================================================================= /row1 (Title) -->

    <!-- ========================================================================================================= row2 (Platform List) -->
     <div class="row">
        <div class="col-md-12">
            <!-- ========================================================================================================= Repeating Platform List -->
            {{#platforms}}

                <div class="col-md-4">

                    <hr>

                    <!-- ========================================================================================================= Platform Logo -->
                    <div class="col-md-3" >
                        <div class="platform_photo paddedBox">
                            <img height="50px" width="50px" src="/static/img/platform.jpg" border=1>
                        </div>
                    </div>
                    <!-- ========================================================================================================= /Platform Logo -->

                    <!-- ========================================================================================================= Platform Information -->
                    <div class="col-md-9 platformBox">
                        <p><h4><a class="androidText" href="/platform/{{platformId}}"><span class="glyphicon glyphicon-th-large"></span> Platform ID: {{platformId}}</a></h4></p>
                        <p>Platform Name: {{platformName}}</p>
                    </div>
                    <!-- ========================================================================================================= /Platform INformation -->
                </div><!-- /col-md-4-->

            {{/platforms}}
            <!-- ========================================================================================================= /Repeating Platform List -->
        </div><!-- /col-md-12 -->
     </div><!-- /row -->
     <!-- ========================================================================================================= /row2 (Platform List) -->

     <!-- ========================================================================================================= row3 (Pagination) -->
     <div class="row">
        {{#pagj}}
            <center>
                <ul class="pagjnation">
                    {{#pagj_front}}<li class="disabled"><a href="">First</a></li>{{/pagj_front}} <!--  Inactive First page -->
                    {{#pagj_front}}<li class="disabled"><a href="">&laquo;</a></li>{{/pagj_front}} <!--  Inactive back arrow -->

                    {{^pagj_front}} <li><a href="/platforms?page=1&limit={{pagj_limit}}">First</a> <a href="/platforms?page={{pagj_less}}&limit={{pagj_limit}}">&laquo;</a></li>{{/pagj_front}} <!-- Active back and First Page -->

                    {{#pagjnation}}
                        {{#active}} <li ><a href="/platforms?page={{page}}&limit={{pagj_limit}}">{{page}}</a></li>{{/active}}  <!-- The Rest of the Page here (Links) -->
                        {{^active}} <li class="active"><a href="#">{{page}}</a></li>{{/active}}  <!-- The Active Page Here -->
                    {{/pagjnation}}

                    {{#pagj_back}}<li class="disabled"><a href="">&raquo;</a></li>{{/pagj_back}} <!-- Inactive forward arrow -->
                    {{#pagj_back}}<li class="disabled"><a href="">Last</a></li>{{/pagj_back}} <!-- Inactive Last page -->

                     {{^pagj_back}} <li><a href="/platforms?page={{pagj_great}}&limit={{pagj_limit}}">&raquo;</a> <a href="/platforms?page={{pagj_end}}&limit={{pagj_limit}}">Last</a></li>{{/pagj_back}} <!--Active forward and Last Page -->
                </ul>
            </center>
        {{/pagj}}
    </div> <!-- /row -->
    <!-- ========================================================================================================= /row3 (Pagination) -->

</div> <!-- /container -->


{{>/foot}}

<script type="text/javascript">
$('tr.rowlink').click( function() {
    window.location = $(this).find('a').attr('href');
});

</script>
</html>